var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  this.style.opacity = '0.4';
   
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // cái này là phải có, để cho phép thả, ngăn chặn những hành động ngoài mong muốn của trình duyệt
  }
  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
  return false;
}


function handleDragEnter(e) {
     // this/e.target is the source node.
  // this / e.target is the current hover target.
    this.classList.add('over'); // bổ sung thêm lớp over vào thuộc tính Class khi chuột nằm trên đối tượng.
  
}

function handleDragLeave(e) {
    //Xoá bỏ lớp over khỏi thuộc tính Class khi chuột rời khỏi đối tượng
  //this.classList.remove('over');  // this / e.target is previous target element.
  
}

function handleDragEnd(e) {   

  //[].forEach.call(cols, function (col) {
    //alert('remove over');
    table.classList.remove('over');    
    dragSrcEl.style.top = 500;
  //});
}

function handleDrop(e) {
  // Don't do anything if dropping the same column we're dragging.
    //Set the source column's HTML to the HTML of the columnwe dropped on.
    
  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
  dragSrcEl.style.opacity = '1'; // thiết lập lại độ trong suốt
  return false;
}


function handleDragOverDeskTop(e) {
  if (e.preventDefault) {
    e.preventDefault(); // cái này là phải có, để cho phép thả, ngăn chặn những hành động ngoài mong muốn của trình duyệt
  }
  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
  return false;
}

function handleDragEnterDeskTop(e) {
     // this/e.target is the source node.
  // this / e.target is the current hover target.
    this.classList.add('over'); // bổ sung thêm lớp over vào thuộc tính Class khi chuột nằm trên đối tượng.
  
}

function handleDragLeaveDeskTop(e) {
    //Xoá bỏ lớp over khỏi thuộc tính Class khi chuột rời khỏi đối tượng
  //this.classList.remove('over');  // this / e.target is previous target element.
  
}

var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)

var tempX = 0
var tempY = 0
function handleDropDeskTop(e) {
    if (IE) {
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
        } else {  // grab the x-y pos.s if browser is NS
        tempX = e.pageX
        tempY = e.pageY
    }
    if (tempX < 0){tempX = 0}
    if (tempY < 0){tempY = 0}

    if (dragSrcEl != this) {
        dragSrcEl.style.left = tempX;
        dragSrcEl.style.top = tempY;
    }
	
    dragSrcEl.style.opacity = '1'; // thiết lập lại độ trong suốt
    return false;
}


function handleDragEndDeskTop(e) {   
  //[].forEach.call(cols, function (col) {
    table.classList.remove('over');
  //});
  dragSrcEl.style.opacity = '1';
}